<template>
    <view class="container">
        <!-- 顶部信息卡片 -->
        <view class="info-card">
            <view class="info-item">
                <view class="info-label">手机号</view>
                <!-- 点击跳转个人中心修改手机号码，修改成功后返回当前页面 -->
                <view class="info-value">
                    {{ currentTripDetails.order.line.phone }}
                    <image class="to-detail-icon" src="/static/personalCenter/black-right.png" mode="aspectFill"
                        @click.stop="navigateTo('/pages/personalCenter/account/modifyPhone?id=' + currentTripId)">
                    </image>
                </view>
            </view>

            <view class="info-item">
                <view class="info-label">座位数</view>
                <view class="info-value"><input class="input" type="number" v-model="seats" />
                    <text style="color: #0B1F20;">座</text>
                    <image class="to-detail-icon" src="/static/personalCenter/black-right.png" mode="aspectFill">
                    </image>
                </view>
            </view>

            <view class="info-item">
                <view class="info-label">上车点</view>
                <view class="info-value"><input class="input" v-model="boarding_location" />
                    <image class="to-detail-icon" src="/static/personalCenter/black-right.png" mode="aspectFill">
                    </image>
                </view>
            </view>
        </view>

        <!-- 更新行程信息按钮 -->
        <button class="update-btn" @click="updateInfo">更新行程信息</button>

        <!-- 温馨提示 -->
        <view class="tips">
            <text class="tips-content">温馨提示：</text>
            <view class="tips-content">
                <view>1.请在上车后将座位费支付车主，平台不代收费用</view>
                <view>2.请按平台显示价格支付车主，若实际收费与平台显示价格不一致的请拨打客服电话举报</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phone: 13537890333,
            seats: '',
            boarding_location: '',
            currentTripId: null,
            currentTripDetails: {}
        }
    },
    onLoad(options) {
        this.currentTripId = options.id
        this.getPassengerTripDetails()
    },
    methods: {
        async getPassengerTripDetails() {
            try {
                const res = await this.$http.get(`/h5/user/trip/passengerDetail/${this.currentTripId}`)
                this.currentTripDetails = res.data
                this.seats = res.data.order.seats
                this.boarding_location = res.data.order.boarding_location

            } catch (error) { }
        },
        navigateTo(url) {
            uni.navigateTo({
                url: url,
            });
        },
        async updateInfoData() {
            if (!this.seats) {
                uni.showToast({
                    title: "请输入座位数",
                    icon: "none",
                });
                return;
            }
            if (!this.boarding_location) {
                uni.showToast({
                    title: "请输入上车点",
                    icon: "none",
                });
                return;
            }
            let params = {
                seats: this.seats,
                boarding_location: this.boarding_location,
            }
            try {
                const res = await this.$http.post(`/h5/user/trip/edit/${this.currentTripId}`, params);
                uni.showToast({
                    title: "更新成功",
                    icon: "success",
                });
                setTimeout(() => {
                    uni.navigateBack();
                }, 1000);
            } catch (error) {
                uni.showToast({ title: error.msg || '提交失败', icon: 'none' })
            }
        },
        async updateInfo() {
            uni.showModal({
                title: "提示",
                content: "确定要更新行程信息吗？",
                success: (res) => {
                    if (res.confirm) {
                        this.updateInfoData()
                    }
                    if (res.cancel) {
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1000);
                    }
                }
            })

        },
    }
}
</script>

<style scoped>
.container {
    padding: 20rpx 26rpx;
}

.info-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 40rpx;
    margin-bottom: 20rpx;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 34rpx 0;
    border-bottom: 2rpx solid #eee;

}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
}

.info-value {
    display: flex;
    align-items: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 32rpx;
    color: #0B1F20;
    line-height: 48rpx;
}

.info-value .input {
    font-size: 32rpx;
    color: #666666;
    text-align: right;
}

.to-detail-icon {
    width: 28rpx;
    height: 28rpx;
}

.update-btn {
    background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
    color: #fff;
    border-radius: 16rpx;
    font-weight: 500;
    font-size: 36rpx;
    height: 100rpx;
    line-height: 100rpx;
    margin-bottom: 20rpx;
}

.tips {
    padding: 0 34rpx;
}



.tips-content {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #999999;
    line-height: 48rpx;

}
</style>